<html>
<head>
    <title>ArtPlayer Demo</title>
    <meta name="referrer" content="never">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Access-Control-Allow-Credentials" content="*"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
    <link rel="dns-prefetch" href="//yanxuan.nosdn.127.net" />
    <link rel="preconnect" href="//yanxuan.nosdn.127.net" crossorigin>

    <meta charset="UTF-8"/>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            border: 0;
            overflow: hidden
        }

        .favnow {
            width: 100%;
            height: 100%;
            background: #000
        }



        .yxq-listbox {
            -webkit-transform: scale(1);
            transform: scale(0);
            transition: all 0.3s ease-in-out;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 10001;
            float: right;
            height: 100%;
            margin-left: -336px;
            width: 336px
        }

        .yxq-listbox .anthology-wrap {
            height: 100%;
            background-color: rgb(0 0 0 / 50%)
        }

        .yxq-listbox .normal-title-wrap {
            padding: 15px 20px
        }

        .yxq-listbox .thesis-wrap {
            width: 100%;
            height: 26px;
            line-height: 26px
        }

        .yxq-listbox .title-link {
            display: block;
            float: left;
            width: 180px;
            font-size: 16px;
            color: hsla(0,0%,100%,0.87)
        }

        .yxq-listbox .title-info {
            max-height: 64px;
            width: 100%;
            font-size: 12px;
            line-height: 17px;
            overflow: auto;
            margin-top: 10px;
            text-align: left;
            color: hsla(0,0%,100%,0.6)
        }

        .yxq-listbox .scroll-area {
            padding: 0 20px;
            font-size: 14px;
            text-align: left;
            height: calc(100% - 272px);
            overflow: auto;
            position: relative;
            scrollbar-track-color:#1f1f1f;scrollbar-arrow-color:#1f1f1f;scrollbar-base-color:#1f1f1f;scrollbar-face-color:#979797;scrollbar-3dlight-color: #979797;
            scrollbar-highlight-color:#979797;scrollbar-shadow-color:#979797}

        .yxq-listbox .anthology-content {
            margin-top: 15px;
            width: 100%;
            font-size: 0
        }

        .yxq-listbox .box-item {
            font-size: 14px;
            background: #45504fc7;
            width: 48%;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            text-align: center;
            color: #fff;
            display: inline-block;
            box-sizing: border-box;
            margin: 1%;
            padding: 0 10px
        }

        .yxq-listbox .yxq-from-select {
            z-index: 1;
            position: absolute;
            top: 12px;
            right: 10%
        }

        .yxq-listbox .yxq-from-select a {
            color: hsla(0,0%,100%,0.6)
        }

        .yxq-listbox .yxq-from-select .yxq-list a {
            display: block;
            height: 36px;
            line-height: 36px;
            white-space: nowrap;
            text-align: center
        }

        .yxq-listbox .yxq-from-select .yxq-list {
            display: none;
            position: absolute;
            background: #25252b;
            border-radius: 4px;
            padding: 10px 15px;
            right: 0;
            top: 18px;
            text-align: center;
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 30%)
        }

        .yxq-listbox .component-title {
            position: relative;
            height: 20px;
            line-height: 20px;
            display: block;
            margin: 12px 0 16px;
            text-align: left;
            color: hsla(0,0%,100%,0.6)
        }

        .yxq-listbox .pic-text-item a {
            position: relative;
            display: block;
            margin-bottom: 12px;
            overflow: hidden;
            height: 166px;
            color: hsla(0,0%,100%,0.6)
        }

        .yxq-listbox .cover {
            position: relative;
            float: left;
            margin-right: 10px;
            font-size: 12px;
            height: 100%;
            overflow: hidden
        }

        .yxq-listbox .anthology-title-wrap {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 130px;
            width: 168px;
            overflow: hidden
        }

        .yxq-listbox .anthology-title-wrap .title {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 18px;
            font-size: 17px;
            line-height: 20px;
            max-height: 58px;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            color: hsla(0,0%,100%,0.87);
            text-align: left
        }

        .yxq-listbox .anthology-title-wrap .subtitle {
            overflow: auto;
            max-height: 66px;
            font-size: 14px;
            bottom: 0;
            width: 168px;
            line-height: 17px;
            margin-bottom: 3px;
            text-align: left
        }

        .yxq-listbox .bj {
            height: 166px;
            width: 122px;
            border-radius: 7px;
            background-color: #25252b;
            object-fit: cover
        }

        .yxq-listbox .yxq-selset-list {
            display: none
        }

        .yxq-stting {
            -webkit-transform: scale(1) !important;
            transform: scale(1) !important;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif
        }

        .vodlist-of,.yxqplayer-mask {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1001;
            display: none
        }

        .yxq-show {
            display: block !important
        }

        .fixed_right_bar {
            position: fixed;
            bottom: 33px;
            right: 1%;
            z-index: 10001
        }

        .fixed_right_bar a {
            font-size: 16px;
            margin: 10px auto;
            position: relative;
            color: #fff
        }

        .ant-back-top {
            display: none
        }

        .video-list-cl {
            text-align: right;
            right: 10px;
            font-size: 16px;
            position: relative;
            height: 0px;
            line-height: 33px;
            z-index: 99
        }

        .yxq-this,.scroll-area a:hover {
            color: #CC6633 !important
        }

        .yxq-listbox ::-webkit-scrollbar,#danmu-show ::-webkit-scrollbar {
            width: 5px;
            height: 5px
        }

        .yxq-listbox ::-webkit-scrollbar-thumb,#danmu-show ::-webkit-scrollbar-thumb {
            background-color: #666
        }

    </style>
</head>
<body>
<div class="favnow"></div>


<script src="artplayer.hls.min.js"></script>
<script src="artplayer.js"></script>

<script>

    var options = {
        container: '.favnow',
        //url: 'http://qiniu.acyou.cn/video/20240617142317%40%E6%95%99%E4%BD%A0%E6%80%8E%E4%B9%88%E6%B7%B7%E7%A4%BE%E4%BC%9A03%E4%B8%AD%E5%9B%BD%E6%9C%80%E7%9C%9F%E5%AE%9E%E7%9A%84%E7%A4%BE%E4%BA%A4%E5%85%B3%E7%B3%BB.mp4',
        url:'https://v.cdnlz18.com/20240525/12894_cd48fcdd/index.m3u8',
        type: 'm3u8',
        volume: 1,//播放器的默认音量
        isLive: false,//使用直播模式，会隐藏进度条和播放时间
        muted: false, //是否默认静音
        autoplay: false,//是否自动播放
        autoSize: false,
        pip: true,
        screenshot: true,
        //设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset
        setting: true,
        flip: true,
        aspectRatio: true,
        playbackRate: true,
        subtitleOffset: true,

        loop: false,
        playbackRateList: [.5, 1, 1.5, 2, 2.5, 3],
        fullscreen: true,
        fullscreenWeb: true,
        miniProgressBar: true,
        mutex: true,
        hotkey: true,
        backdrop: true,
        playsInline: true,
        autoPlayback: true,
        airplay: true,
        theme: '#23ade5',
        cssVar: {},
        fastForward: true,
        plugins: [
            adsPlugin({
                url: 'http://qiniu.acyou.cn/images/10.jpg'
            })
        ],
        //控制层
        controls: [
            {
                name: 'select-episodes',
                index: 1,
                position: 'right',
                html: '选集',
                style: {

                },
                selector: [
                    {
                        default: true,
                        html: '<span>第1集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                    {
                        html: '<span>第2集</span>',
                    },
                ],
                onSelect: function (item, $dom) {
                    console.info(item, $dom);
                    return '选集';
                },
            }
        ],
        //右键菜单
        contextmenu: [
            {
                name: 'your-menu',
                html: 'Your Menu',
                click: function (...args) {
                    console.info(args);
                    art.contextmenu.show = false;
                },
            },
        ],
        //自定义设置
        settings: [
            {
                html: 'Subtitle',
                width: 250,
                tooltip: 'Subtitle 01',
                selector: [
                    {
                        default: true,
                        html: '<span style="color:red">Subtitle 01</span>',
                        url: '/assets/sample/subtitle.srt?id=1',
                    },
                    {
                        html: '<span style="color:yellow">Subtitle 02</span>',
                        url: '/assets/sample/subtitle.srt?id=2',
                    },
                ],
                onSelect: function (item, $dom, event) {
                    console.info(item, $dom, event);
                    art.subtitle.url = item.url;
                    return item.html;
                },
            },
            {
                html: 'Quality',
                width: 150,
                tooltip: '1080P',
                selector: [
                    {
                        default: true,
                        html: '1080P',
                        url: '/assets/sample/video.mp4?id=1080',
                    },
                    {
                        html: '720P',
                        url: '/assets/sample/video.mp4?id=720',
                    },
                    {
                        html: '360P',
                        url: '/assets/sample/video.mp4?id=360',
                    },
                ],
                onSelect: function (item, $dom, event) {
                    console.info(item, $dom, event);
                    art.switchQuality(item.url, item.html);
                    return item.html;
                },
            },
        ]
    };
    const art = new Artplayer(options);

    /**
     * 广告插件
     * @param option
     * @returns {function(*): {hide: function(): void, name: string, show: function(): void}}
     */
    function adsPlugin(option) {
        return (art) => {
            art.layers.add({
                name: 'ads',
                html: `<div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
                            <img style="width: 500px" src="${option.url}">
                       </div>`,
                style: {
                    display: 'none',
                    position: 'absolute',
                    width: '100%',
                    height: '100%'
                },
            });

            function show() {
                art.layers.ads.style.display = 'block';
            }

            function hide() {
                art.layers.ads.style.display = 'none';
            }

            art.controls.add({
                name: 'hide-ads',
                position: 'right',
                html: 'Hide Ads',
                tooltip: 'Hide Ads',
                click: hide,
                style: {
                    marginRight: '20px'
                }
            });

            art.controls.add({
                name: 'show-ads',
                position: 'right',
                html: 'Show Ads',
                tooltip: 'Show Ads',
                click: show,
            });

            art.on('play', hide);
            art.on('pause', show);

            return {
                name: 'adsPlugin',
                show,
                hide
            };
        }
    }

//扩展1.          https://jx.xmflv.com/?url=https://www.iqiyi.com/v_21iketmnnjs.html




    //const longPressDuration = 500;
    //var beforeTime = new Date().getTime();
    //var keyStatus = 0;
    //var before_playbackRate = 0;
    //document.addEventListener('keydown', function (event) {
    //    if (event.keyCode === 39) {
    //        if (keyStatus === 1) {
    //            //console.log("长按触发");
    //            if (before_playbackRate === 0) {
    //                before_playbackRate = art.playbackRate;
    //            }
    //            art.playbackRate = 3;
    //        } else {
    //            keyStatus = 1;
    //            beforeTime = new Date().getTime();
    //        }
    //    }
//
    //});
//
    //document.addEventListener('keyup', function (event) {
    //    if (event.keyCode === 39) {
    //        var now = new Date().getTime();
    //        if ((now - beforeTime) < longPressDuration) {
    //            //console.log("短按弹起", event)
    //            art.forward = 5;
    //        }else {
    //            //console.log("长按弹起", event)
    //            art.playbackRate = before_playbackRate;
    //            before_playbackRate = 0;
    //        }
    //        keyStatus = 0;
    //    }
    //});



    //art.on('video:ratechange', () => {
    //    console.info('video:ratechange');
    //});

    //art.on('hotkey', (event) => {
    //    if (event.keyCode === 39) {
    //        var now = new Date().getTime();
    //        if ((now - beforeTime) < longPressDuration) {
    //            console.log("长按")
    //        }else {
    //            console.info('hotkey', event, '时间',new Date().getTime());
    //        }
    //        beforeTime = now;
    //    }
    //});

    //art.on('ready', () => {
    //    console.info(art.playbackRate);
    //    art.playbackRate = 2;
    //    console.info(art.playbackRate);
    //});
</script>
</body>
</html>